import { useState, useEffect } from 'react';
import { Card, FormLayout, TextField, Button, Box, Thumbnail } from '@shopify/polaris';
import './IconEditor.css';

// 导入图片资源
import sdIcon from '../../assest/image/sd.png';
import lcIcon from '../../assest/image/lc.png';
import xqcIcon from '../../assest/image/xqc.png';
import yycIcon from '../../assest/image/yyc.png';
import czcIcon from '../../assest/image/czc.png';
import xmtIcon from '../../assest/image/xmt.png';
import xlmIcon from '../../assest/image/xlm.png';
import bmIcon from '../../assest/image/bm.png';
import hsqIcon from '../../assest/image/hsq.png';
import bomIcon from '../../assest/image/bom.png';

interface IconEditorProps {
  selectedElement: any;
  onUpdate: (updates: any) => void;
  onDelete: () => void;
  onIconChange: (newIcon: any) => void;
}

// 图标列表
const icons = [
  {
    id: 'sd',
    name: 'SD',
    url: sdIcon,
    thumbnail: sdIcon
  },
  {
    id: 'lc',
    name: 'LC',
    url: lcIcon,
    thumbnail: lcIcon
  },
  {
    id: 'xqc',
    name: 'XQC',
    url: xqcIcon,
    thumbnail: xqcIcon
  },
  {
    id: 'yyc',
    name: 'YYC',
    url: yycIcon,
    thumbnail: yycIcon
  },
  {
    id: 'czc',
    name: 'CZC',
    url: czcIcon,
    thumbnail: czcIcon
  },
  {
    id: 'xmt',
    name: 'XMT',
    url: xmtIcon,
    thumbnail: xmtIcon
  },
  {
    id: 'xlm',
    name: 'XLM',
    url: xlmIcon,
    thumbnail: xlmIcon
  },
  {
    id: 'bm',
    name: 'BM',
    url: bmIcon,
    thumbnail: bmIcon
  },
  {
    id: 'hsq',
    name: 'HSQ',
    url: hsqIcon,
    thumbnail: hsqIcon
  },
  {
    id: 'bom',
    name: 'BOM',
    url: bomIcon,
    thumbnail: bomIcon
  }
];

export const IconEditor: React.FC<IconEditorProps> = ({
  selectedElement,
  onUpdate,
  onDelete,
  onIconChange
}) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [rotation, setRotation] = useState(0);
  const [scale, setScale] = useState(1);
  const [currentIcon, setCurrentIcon] = useState<any>(null);

  useEffect(() => {
    if (selectedElement) {
      setPosition({
        x: Math.round(selectedElement.left),
        y: Math.round(selectedElement.top)
      });
      setRotation(Math.round(selectedElement.angle));
      setScale(Math.round(selectedElement.scaleX * 100) / 100);
      
      // 设置当前图标
      const icon = icons.find(icon => icon.id === selectedElement.id);
      if (icon) {
        setCurrentIcon(icon);
      }
    }
  }, [selectedElement]);

  const handlePositionChange = (axis: 'x' | 'y', value: string) => {
    const numValue = parseInt(value) || 0;
    setPosition(prev => ({
      ...prev,
      [axis]: numValue
    }));
  };

  const handleRotationChange = (value: string) => {
    const numValue = parseInt(value) || 0;
    setRotation(numValue);
  };

  const handleScaleChange = (value: string) => {
    const numValue = parseFloat(value) || 1;
    setScale(numValue);
  };

  const handleApply = () => {
    if (selectedElement) {
      onUpdate({
        position: { x: position.x, y: position.y },
        rotation,
        scale
      });
    }
  };

  const handleIconSelect = (icon: any) => {
    setCurrentIcon(icon);
    onIconChange(icon);
  };

  if (!selectedElement) {
    return null;
  }

  return (
    <Card>
      <div className="icon-editor">
        <div className="icon-editor-content">
          <FormLayout>
            <div className="icon-selector">
              <h3>选择图标</h3>
              <div className="icon-grid">
                {icons.map(icon => (
                  <div
                    key={icon.id}
                    className={`icon-item ${currentIcon?.id === icon.id ? 'selected' : ''}`}
                    onClick={() => handleIconSelect(icon)}
                  >
                    <Thumbnail source={icon.thumbnail} alt={icon.name} />
                    <span>{icon.name}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="position-inputs">
              <TextField
                label="X 坐标"
                type="number"
                value={position.x.toString()}
                onChange={handlePositionChange.bind(null, 'x')}
                autoComplete="off"
              />
              <TextField
                label="Y 坐标"
                type="number"
                value={position.y.toString()}
                onChange={handlePositionChange.bind(null, 'y')}
                autoComplete="off"
              />
            </div>
            
            <TextField
              label="旋转角度"
              type="number"
              value={rotation.toString()}
              onChange={handleRotationChange}
              autoComplete="off"
              suffix="°"
            />
            
            <TextField
              label="缩放比例"
              type="number"
              value={scale.toString()}
              onChange={handleScaleChange}
              autoComplete="off"
              step="0.1"
            />

            <div className="button-group">
              <Button onClick={handleApply}>应用更改</Button>
              <Button tone="critical" onClick={onDelete}>删除图标</Button>
            </div>
          </FormLayout>
        </div>
      </div>
    </Card>
  );
}; 